<template>
  <div class="from2">
    <!-- 顶部区域 -->
    <div class="header">
      <el-button type="primary">添加产品</el-button>
      <p>购进总指标（万元）：￥152.65</p>
      <p>指标按季度分解（万元）：</p>
      <p>【Q1】￥12.5，【Q2】￥12.5，【Q3】￥12.5，【Q4】￥12.5，</p>
      <p>纯销总指标（万元）：￥152.65</p>
    </div>

    <div class="from_content">
      <!-- 产品区域 -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline margin"
      >
        <div>
          <el-form-item label="产品" label-width="100px">
            <el-input v-model="formInline.user" value="选择产品" class="input">
            </el-input>
          </el-form-item>
          <span class="span">美复胶丸 24粒/盒</span>
          <el-form-item label="协议效期:" label-width="230px">
            <input type="text" value="2020-02-01 - 2020-05-01" class="input2" />
          </el-form-item>
          <el-tag type="warning" effect="plain"> 删除 </el-tag>
        </div>
      </el-form>

      <!-- 协议区域 -->
      <div class="price_box">
        <div class="price">
          <p>协议价（元）</p>
          <p>票折(元)</p>
          <p>购进指标量（大单位）</p>
          <p>购进指标量（小单位）</p>
          <p>购进金额（万元）</p>
          <p>纯销指标量（小单位）</p>
          <p>纯销指标金额（万元）</p>
        </div>
        <div class="place">
          <el-input
            placeholder="请输入"
            v-for="v in 7"
            :key="v"
            class="input3"
          ></el-input>
        </div>
      </div>
      <!-- 分销区域 -->
      <div class="content">
        <div class="content1">
          <p v-for="(v, i) in arr" :key="i">{{ v }}</p>
        </div>
        <div class="content2">
          <el-input placeholder="请输入" class="input4"></el-input>
          <el-select
            class="select"
            v-model="value1"
            placeholder="请选择"
          ></el-select>
          <el-input placeholder="请输入" class="input4"></el-input>
          <el-select
            class="select"
            v-model="value2"
            placeholder="请选择"
          ></el-select>
          <el-input placeholder="请输入" class="input4"></el-input>
          <el-select
            class="select"
            v-model="value2"
            placeholder="请选择"
          ></el-select>
          <input type="text" value="2020-05-15" class="input5" />
          <input type="text" value="2020-05-15" class="input5" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        user: "选择产品",
      },
      arr: [
        "分销奖励",
        "费用科目",
        "零售配送",
        "费用科目",
        "预料配送商",
        "费用科目",
        "自定义7",
        "自定义8",
      ],
      value1: "单选项1",
      value2: "多选项1",
    };
  },
};
</script>

<style scoped>
.from2 {
  width: 95%;
  margin: 0 auto;
}

.header {
  width: 95%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.header p {
  font-size: 14px;
}

.from_content {
  width: 100%;
  background-color: #ffffff;
  overflow: hidden;
  margin-top: 10px;
}

.margin {
  height: 50px !important;
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  border-bottom: 1px solid #eee;
}

.input {
  width: 100px !important;
}

.span {
  position: absolute;
  width: 130px;
  height: 20px;
  font-size: 12px;
  margin-top: 12px;
  color: #79a9fe;
}

.input2 {
  width: 200px;
  height: 40px;
  border: 0;
  padding-left: 20px;
  outline: none;
  font-size: 14px;
  border: 1px solid #eee;
  border-radius: 5px;
}

.el-tag {
  position: absolute;
  right: 50px;
}

.price_box {
  width: 98%;
  margin: 0 auto;
  border: 1px solid #efefef;
}

.price {
  width: 100%;
  height: 40px;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 14px;
  margin: 0 auto;
  border-bottom: 1px solid #ededed;
}

.price p {
  width: 140px;
}

.place {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
}

.input3 {
  width: 140px !important;
  background-color: #f2f2f2 !important;
}

.content {
  width: 98%;
  height: 100px;
  margin: 15px auto;
  border: 1px solid #efefef;
}

.content1 {
  width: 100%;
  height: 40px;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 14px;
  margin: 0 auto;
  border-bottom: 1px solid #ededed;
}

.content1 p {
  width: 120px;
}

.content2 {
  width: 100%;
  height: 60px;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 14px;
  margin: 0 auto;
}

.select {
  width: 125px !important;
}

.input4 {
  width: 125px !important;
  background-color: #f2f2f2 !important;
}

.input5 {
  width: 125px;
  height: 40px;
  border: 0;
  padding-left: 20px;
  margin-top: 5px;
  outline: none;
  font-size: 14px;
  border: 1px solid #eee;
  border-radius: 5px;
}
</style>